<!--
 * @Date: 2019-11-06 10:43:31
 * @LastEditors: peng qiao
 * @LastEditTime: 2020-02-22 17:03:18
 -->
<template>
  <div class="work_schedule">
    <van-nav-bar
      title="办件进度"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <ul class="menu_list">
      <li
        v-for="(item, index) in serviceList"
        :key="index"
        @click="menuClick(item)"
      >
        <span>{{ item.serviceName }}</span>
        <span class="right_icon">
          <van-icon name="arrow" color="#999999" size="17px" />
        </span>
        <span
          class="right_count"
          :style="{
            background: item.serviceName == '已办结' ? '#cccccc' : '#DC4630'
          }"
          >{{ item.count }}</span
        >
      </li>
    </ul>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/controller/govService.js";
import constant from "@/controller/constant.js";
export default {
  data() {
    return {
      showLoading: false,
      serviceList: []
    };
  },
  mounted() {
    this.getStatistics();
  },
  methods: {
    getStatistics() {
      this.showLoading = true
      api
        .service_apply_v1_statistics()
        .then(res => {
          if (res.code === "0") {
            this.serviceList = []
            const object = res.datas
            for (const key in object) {
              if (object.hasOwnProperty(key)) {
                if (key !== "待邮寄" && key !== "待领取") {
                  this.serviceList.push({
                    serviceName: key,
                    count: object[key]
                  })
                }
              }
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    menuClick(item) {
      this.$router.push({
        name: "matterStatus",
        query: item
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/workstation.scss";

.work_schedule {
  background: #ffffff;
  height: 100%;

  .menu_list {
    li {
      line-height: 14px;
      padding: 15px;
      border-bottom: 1px solid #edeff2;

      .right_count {
        float: right;
        color: #ffffff;
        line-height: 14px;
        padding: 1px 5px;
        border-radius: 50%;
        text-align: center;
        margin-right: 5px;
      }

      .right_icon {
        float: right;
      }
    }
  }
}
</style>
